
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports ={
    mode: "development",
    devtool: "source-map",
    entry: "./src/index.js",
    output: {
        path: path.resolve("dist"),
        filename: "main.js",
    },
    // webpack会先根据resolveLoader里面的loader，没有的话再查找依赖中
    resolveLoader:{
        // alias:{
        //     'babel-loader':path.resolve('loaders/babel-loader.js'),
        //     'file-loader':path.resolve('loaders/file-loader.js'),
        // },
        
       // 不需要挨个配置别名，查询顺序是先查找path.resolve('loaders')，然后再查找node_modules
        modules:[path.resolve('loaders'),'node_modules'] 
    },
    module: {
        rules: [
          {
            test: /\.js$/,
            use: [
              {
                loader: "babel-loader",
                options: {
                  presets: ["@babel/preset-env"],
                },
              },
            ],
          },
          {
            test: /\.jpeg$/,
            use: [
              {
                // loader: "file-loader",
                // options: {
                //   filename: "[hash:8].[ext]",
                // },
                loader: "url-loader",
                options: {
                  filename: "[hash:8].[ext]",
                  limit:8000*1024
                },
              },
            ],
          },
          {
            test: /\.less$/,
            use: [
              {
                loader: "style-loader",
              },
              {
                loader: "less-loader",
              },
            ],
          },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
          template: "./src/index.html",
        }),
    ],
}